<template>
  <div v-show="dialogValue" class="add-page f-c">
    <BackPage title="掌上中介评价" show-back @back="onPageBack" />
    <div class="add-form-box f-g">
      <TitleBox title="评价详情" />
      <div style="height: 600px;overflow:auto;">
        <div v-for="(item,index) in tableData" :key="index" class="box">
          <div class="box-item">
            机构名称：{{ item.departmentName }}
          </div>
          <div class="box-item">
            项目名称：{{ item.projectName }}
          </div>
          <div class="box-item">
            事项名称：{{ item.eventName }}
          </div>
          <div class="box-item">
            评价时间：{{ item.createTime }}
          </div>
          <div class="box-item f-r a-c">
            <span>满意度：</span>
            <el-rate
              :value="item.score"
              disabled
              :max="5"
              show-score
              text-color="#ff9900"
              score-template="{value}"
            />
          </div>
          <div class="box-item">
            评价内容：{{ item.comment }}
          </div>
        </div>
        <el-empty v-if="!tableData.length" description="暂无评价" />
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>

    </div>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http_intermediary_info } from '@/api'
export default {
  name: 'User1Add',
  mixins: [crud],
  data() {
    return {
      dialogValue: false,
      tableData: [
      ],
      intermediaryId: null
    }
  },
  methods: {
    initData() {
      if (!this.intermediaryId) return
      this.loading = true
      http_intermediary_info.ap_page({
        intermediaryId: this.intermediaryId,
        ...this.getQueryParams()
      }).then(res => {
        this.loading = false
        this.totalSize = res.data.total
        this.tableData = res.data.records
      })
    },
    open(item) {
      this.intermediaryId = item.id
      this.initData()
      this.dialogValue = true
    },
    onPageBack() {
      this.dialogValue = false
    }
  }
}
</script>

<style scoped lang="scss">
.add-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.add-form-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
}

.box {
  margin: 36px 0px;
  width: 100%;
  background: #F5FAFD;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #E4E5E7;
  padding: 24px 18px;
  padding-bottom: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  .box-item {
    margin-bottom: 15px;
  }
}
</style>
